<template>
  <div class="w-100 h-100 d-flex">
    <div class="flex-box fz20" style="width: 216px;padding:10px 0;">
      <div class="total-bg">
        <div>总数（个)</div>
        <div class='totalNum'>382</div>
      </div>
      <div
        class="flex-box c-box"
        v-for="(item, index) in totalList"
        :key="index"
      >
        <div style="flex: 0 0 60px">{{ item.name }}</div>
        <div class="iconUnActive"></div>
        <div ><span class="unit">{{ item.value }}</span>个</div>
      </div>
    </div>
    <div class="left h-100" style="flex: 1; width: 0">
      <div id="yjbnsll" style="width: 100%; height: 100%"></div>
    </div>
    <div class="right h-100" style="width: 400px">
      <fakeLenfend
        style="width: 100%; height: 90%;"
        :color="list.map((item) => item.itemStyle.color)"
        :text="list.map((item) => item.name)"
        orient="column"
      >
      </fakeLenfend>
    </div>
  </div>
</template>

<script lang="ts" setup>
import * as echarts from "echarts";
import fakeLenfend from "@/components/project/fakeLegend.vue";

function generateData(totalNum, bigvalue, smallvalue, color) {
  let dataArr = [];
  for (var i = 0; i < totalNum; i++) {
    if (i % 2 === 0) {
      dataArr.push({
        name: (i + 1).toString(),
        value: bigvalue,
        itemStyle: {
          normal: {
            color: color,
            borderWidth: 0,
          },
        },
      });
    } else {
      dataArr.push({
        name: (i + 1).toString(),
        value: smallvalue,
        itemStyle: {
          normal: {
            color: "rgb(0,0,0,0)",
            borderWidth: 0,
          },
        },
      });
    }
  }
  return dataArr;
}
let threeData = generateData(10, 40, 10, "#5CE1FF");
let startAngle = 50; // 初始旋转角度

const option = {
  title: [
    {
      text: "",
      x: "center",
      y: "42%",
      textStyle: {
        fontSize: 24,
        fontWeight: "normal",
        color: "#fff",
      },
    },
    {
      text: "数量(个)",
      x: "center",
      y: "52%",
      textStyle: {
        fontSize: 20,
        fontWeight: "normal",
        color: "#fff",
      },
    },
  ],

  series: [
    {
      name: "",
      type: "pie",
      clockWise: true,
      hoverAnimation: false,
      label: {
        show: false,
      },
      labelLine: {
        show: false,
      },
      radius: ["40%", "50%"],
      center: ["50%", "50%"],
      data: [],
    },
    {
      type: "pie",
      name: "旋转圆",
      zlevel: 20,
      silent: true,
      radius: ["57%", "56%"],
      hoverAnimation: false,
      startAngle: startAngle,
      data: threeData,
      label: {
        normal: {
          show: false,
        },
      },
      labelLine: {
        normal: {
          show: false,
        },
      },
    },
  ],
};

let myChart: any;

onMounted(() => {
  myChart = echarts.init(document.getElementById("yjbnsll") as HTMLElement);
  myChart.setOption(option);
});

const dataList = [
  { name: "建桥街道", color: "#5CE1FF" },
  { name: "江汉二桥街道", color: "#B8EB8F" },
  { name: "晴川街道", color: "#FE7E1D" },
  { name: "永丰街道", color: "#FBD8A0" },
  { name: "鹦鹉街道", color: "#5CE1FF" },
  { name: "江堤街道", color: "#B8EB8F" },
  { name: "洲头街道", color: "#FE7E1D" },
  { name: "四新街道", color: "#FBD8A0" },
  { name: "五里墩街道", color: "#B8EB8F" },
  { name: "晴川龙阳街道", color: "#FE7E1D" },
  { name: "琴断口街道", color: "#FBD8A0" },
];
const totalList = [
  { name: "学校", value: "100" },
  { name: "广场", value: "72" },
  { name: "公园", value: "170" },
  { name: "体育场", value: "100" },
];
const props = defineProps({
  selectValue: {
    default: "0",
  },
});
const jsonData: any = inject("jsonData");
const current = computed(() => {
  let data = [];
  try {
    data = jsonData.value.yjzy.yjblsld[props.selectValue];
  } catch (error) {}

  return data;
});

const list = ref([]);
const allCount = ref(0);

watch(
  () => current.value,
  (val) => {
    if (val) {
      allCount.value = val.reduce((pre: number, cur: number) => pre + cur);

      const data = val.map((value: any, index: number) => ({
        ...dataList[index],
        value,
        itemStyle: {
          color: dataList[index].color,
        },
      }));
      list.value = data;

      myChart.setOption({
        title: [
          {
            text: allCount.value + "万",
          },
        ],
        series: [{ data }],
      });
    }
  }
);
</script>

<style scoped lang="less">
/deep/ .d-flex {
  justify-content: flex-start!important;
  align-items: baseline;
  flex-flow: wrap;
  height: 50px;
  .color {
    width: 26px;
    height: 26px;
    margin-top: 0;
  }
}
.flex-box {
  display: flex;
  flex-flow: column;
  text-align: center;
  justify-content: space-around;
}
.c-box {
  flex-flow: nowrap;
  background-color: rgba(225, 225, 225, 0.09);
  justify-content: space-between;
  margin-bottom: 2px;
  height: 100%;
  align-items: center;
  border-left: 3px solid #60ffce;
  padding: 0 14px 0 20px;
  font-size: 20px;
  color: #bac3cc;
}
.fz20 {
  font-size: 20px;
}
.total-bg {
  background: url("@/assets/image/yingjizhihui/yjbnsll.png");
  background-size: 100%;
  line-height: normal;
}
.iconUnActive {
  width: 25px;
  height: 25px;
  background: url("@/assets/image/underGround/location_grey.png");
  background-size: 100% 100%;
}
.unit {
  font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
  font-weight: 400;
  font-size: 28px;
  color: #ffffff;
  line-height: 21px;
  text-shadow: 0px 0px 3px #00f3ff;
  text-stroke: 1px rgba(0, 0, 0, 0);
  text-align: center;
  font-style: normal;
  text-transform: none;
  -webkit-text-stroke: 1px rgba(0, 0, 0, 0);
}
.totalNum{
    color: #00F3FF;
    font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
    font-size: 36px;
    line-height: normal;
    font-weight: 600;
    font-style: italic;
}
</style>
